<template>
  <div class="myTransfer">
    <el-transfer v-model.lazy="childModel"
                 :data="data"
                 :titles="titles"
                 :button-texts="buttonTexts"
                 :props="props"
                 @change="change(childModel)"
    ></el-transfer>
  </div>
</template>

<script>

export default {
  name: 'myTransfer',
  props: {
    // 当前组件绑定值
    model: {
      type: Array,
      require: true
    },
    // Transfer 的数据源
    data: {
      type: Array,
      require: true
    },
    // 自定义列表标题['列表 1', '列表 2']
    titles: {
      type: Array,
      default () {
        return []
      }
    },
    // 自定义按钮文案
    buttonTexts: {
      type: Array,
      default () {
        return []
      }
    },
    // 数据源的字段别名 key为绑定值字段 label为文案
    props: {
      type: Object,
      default () {
        return {key: 'value', label: 'label'}
      }
    },
    // 当前组件change改变方法
    change: {
      type: Function,
      default (val) {

      }
    }
  },
  data () {
    return {
      childModel: this.model
    }
  },
  watch: {
    childModel: function (val) {
      this.$emit('update:model', val)
    },
    model (val) {
      if (val !== this.childModel) {
        this.childModel = val
      }
    }
  },
  created () {
  },
  methods: {
  }
}
</script>

<style lang="scss">
</style>
